<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Animadrag: Drag and Drop Plugin with Animated Easing</title>

<!-- sumber : http://wayfarerweb.com/jquery/plugins/animadrag/ 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://wayfarerweb.com/js/jquery.easing.js"></script>
<script type="text/javascript" src="http://wayfarerweb.com/js/animadrag.js"></script>
-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jqeasing.obus.js"></script>
<script type="text/javascript" src="jqsdrakV01A.obus.js"></script>
</head>

<body>
<div id="miun">

<div style="width:152px;height:45px;">
<div id="drak" style="border:2px solid #555;width:150px;height:44px;border-radius:4px;padding:0 1px 1px 1px;background:#fff;">
<div class="dragger" style="cursor:move;height:15px;background:#333;color:#fff;font:normal 10px Verdana;text-align:center;">drag me!</div>
<div style="display:block;position:relative;height:30px;">
<input onclick="select();"id="button" class="jqcprgba" data-rgba="0.7" size="7" value="#ff00ff"/>
<div id="rgb_aOut"></div>
</div>
</div>
</div>

    <div id="anima-drag2" style="cursor:move;border:2px solid #ccc; background: red; width: 150px; height: 70px;"><span>Limited to #page and slow</span></div>
    <div id="anima-drag3" style="cursor:move;border:2px solid #ccc; background: green; width: 150px; height: 70px;"><span>Limited to #page, easeOutBounce easing, hides text when picked up</span></div>
    <div id="anima-drag4" style="cursor:move;border:2px solid #ccc; color: #000; background: yellow; width: 150px; height: 70px;"><span>Faster, easeInCubic easing, appends to original div when dropped</span></div>
    <div id="anima-drag5" style="border:2px solid #ccc; color: #000; background: orange; width: 150px; height: 70px;"><div class="dragger" style="cursor:move;height:15px;background:#333;">&nbsp;</div><span style="display:block;">Faster, uses grip to drag around</span></div>
    <div id="anima-drag6" style="cursor:move;border:2px solid #ccc; color: #000; background: aqua; width: 150px; height: 70px;"><span>Fastest, with high interval</span></div>

</div>

<script type="text/javascript">

$(document).ready(function() { 
    document.body.onselectstart = function() {return false;} 
    $('#drak').jqdrak({
        interval: 50, 
        lokasi: '#miun',
        speed: 50 ,
        dragger: '.dragger' 
    }); 
    $('#anima-drag2').jqdrak({ 
        speed: 1500 
    }); 
    $('#anima-drag3').jqdrak({ 
        lokasi: '#miun', 
        easing: 'easeOutBounce', 
        speed: 300 ,
        interval: 100,
        before: function() { 
            $(this).find('span').hide(); 
        }, 
        after: function() { 
            $(this).find('span').show(); 
        } 
    }); 
    $('#anima-drag4').jqdrak({ 
        speed: 200, 
        interval: 250, 
        easing: 'easeInCubic', 
        after: function() { 
            $(this).css({position:'static'}).appendTo('#drag-group'); 
        } 
    }); 
    $('#anima-drag5').jqdrak({ 
//        speed: 150, 
 //       interval: 120, 
          dragger: '.dragger' 
    }); 
    $('#anima-drag6').jqdrak({ 
        speed: 0, 
        interval: 400 
    }); 
});
</script>


<!-- original 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://wayfarerweb.com/js/jquery.easing.js"></script>
<script type="text/javascript" src="http://wayfarerweb.com/js/animadrag.js"></script>

<div id="page">
<div id="drag-group" style="min-height: 250px;">
    <div id="anima-drag" style="border:2px solid #ccc; background: blue; width: 150px; height: 70px;"><span>Default</span></div>
    <div id="anima-drag2" style="border:2px solid #ccc; background: red; width: 150px; height: 70px;"><span>Limited to #page and slow</span></div>
    <div id="anima-drag3" style="border:2px solid #ccc; background: green; width: 150px; height: 70px;"><span>Limited to #page, easeOutBounce easing, hides text when picked up</span></div>
    <div id="anima-drag4" style="border:2px solid #ccc; color: #000; background: yellow; width: 150px; height: 70px;"><span>Faster, easeInCubic easing, appends to original div when dropped</span></div>
    <div id="anima-drag5" style="border:2px solid #ccc; color: #000; background: orange; width: 150px; height: 70px;"><div class="grip" style="height:15px;background:#333;">&nbsp;</div><span>Faster, uses grip to drag around</span></div>
    <div id="anima-drag6" style="border:2px solid #ccc; color: #000; background: aqua; width: 150px; height: 70px;"><span>Fastest, with high interval</span></div>
</div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        document.body.onselectstart = function() {return false;}
$('#anima-drag').animaDrag()({
            boundary: '#page',
            easing: 'easeOutBounce'
});
        $('#anima-drag1').animaDrag();

        $('#anima-drag2').animaDrag({
            boundary: '#page',
            speed: 1500
        });
        $('#anima-drag3').animaDrag({
            boundary: '#page',
            easing: 'easeOutBounce',
            before: function() {
                $(this).find('span').hide();
            },
            after: function() {
                $(this).find('span').show();
            }
        });
        $('#anima-drag4').animaDrag({
            speed: 200,
            interval: 250,
            easing: 'easeInCubic',
            after: function() {
                $(this).css({position:'static'}).appendTo('#drag-group');
            }
        });
        $('#anima-drag5').animaDrag({
            speed: 2500,
            interval: 1000,
            grip: '.grip'
        });
        $('#anima-drag6').animaDrag({
            speed: 0,
            interval: 400
        });
    });
</script>


contoll 

<script>
jQuery(element).animaDrag({ 
    speed: 400, 
    interval: 300, 
    easing: null, 
    cursor: 'move', 
    boundary: document.body, 
    grip: null, 
    overlay: true, 
    after: function(e) {}, 
    during: function(e) {}, 
    before: function(e) {}, 
    afterEachAnimation: function(e) {} 
}); 
</script>
-->
</body>
</html>